<template>
	<view class="repair-wrap">
		<view class="repair-box  u-p-l-30 u-p-r-30" style="margin-top: -20px;">
			<view class="header-form">
				<view class="header-li">
					<view class="header-name">
						<h3><text style="color: red;">*</text>租户姓名</h3>
					</view>
					<u-input v-model="ruleForm.names" maxlength="4" style="margin-top: 7px;" placeholder="请输入"  />
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>	<text style="color: red;">*</text>租户电话</h3>
					</view>
					<u-input v-model="ruleForm.number" type="number" maxlength="11" style="margin-top: 7px;" placeholder="请输入" /> 
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>	<text style="color: red;">*</text>身份证号码</h3>
					</view>
					<textarea v-model="ruleForm.idcars" placeholder="请输入" class="text-area"></textarea>
				</view>
				<view class="guarn-box " style="margin-top: 10px;">
					<view class="header-name">
						<h3><text style="color: red;">*</text>租户身份证</h3>
					</view>
					<view style="display: flex;justify-content: space-around;">
						<view>
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="ruleForm.id_card_positive">
								<view class="guarn-box2-img">
									<image :src="ruleForm.id_card_positive"></image>
									<u-icon @click="colseImg(ruleForm.id_card_positive)" name="close" color="red"
										size="40" class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!ruleForm.id_card_positive">
								<view @click="uoloadHouse">
										<image style="width: 280rpx; height: 190rpx"	src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/zhengSf.png"></image>
								</view>

							</view>
						</view>
						<view>
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="ruleForm.id_card_side">
								<view class="guarn-box2-img">
									<image :src="ruleForm.id_card_side"></image>
									<u-icon @click="colseImg2(ruleForm.id_card_side)" name="close" color="red" size="40"
										class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!ruleForm.id_card_side">
								<view @click="uoloadHouse2">
									<image style="width: 280rpx; height: 190rpx"	src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/fanSf.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>	<text style="color: red;">*</text>性别</h3>
					</view>
					<picker :value="index" @change="typeBtn" :range="typaBtne" range-key="name" mode="selector">
						<view class="form-select">{{typaBtne[index].name}}</view>
					</picker>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>民族</h3>
					</view>
					<textarea v-model="ruleForm.nation" placeholder="请输入" class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>出生日期</h3>
					</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>职业</h3>
					</view>
					<textarea v-model="ruleForm.rent_count" placeholder="请输入" class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>	<text style="color: red;">*</text>租金</h3>
					</view>
					<textarea v-model="ruleForm.rent_money" placeholder="请输入" class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>	<text style="color: red;">*</text>付款方式</h3>
					</view>
					<picker :value="index3" @change="houseRen3" :range="typaBtne3" range-key="name" mode="selector">
						<view class="form-select">{{typaBtne3[index3].name}}</view>
					</picker>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>	<text style="color: red;">*</text>押金</h3>
					</view>
					<textarea v-model="ruleForm.deposit_money" placeholder="请输入" class="text-area">元</textarea>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>	<text style="color: red;">*</text>租赁开始时间</h3>
					</view>
					<picker style="margin-left: 80px;" mode="date" :value="date2" :start="startDate" :end="endDate"
						@change="bindDateChange2">
						<view class="uni-input">{{date2}}</view>
					</picker>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3>	<text style="color: red;">*</text>租赁到期时间</h3>
					</view>
					<picker style="margin-left: 80px;" mode="date" :value="date3" :start="startDate" :end="endDate"
						@change="bindDateChange3">
						<view class="uni-input">{{date3}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view>
			<view class="repair-box u-p-l-30 u-p-r-30"
				style="margin-top: -20px;padding-right: 0px !important;height: 550px;">
				<view class="header-form">
					<view style="padding-bottom: 28px;padding-top: 19px;">
						<h3>房屋基本信息</h3>
					</view>
					<view class="header-li">
						<view class="header-name">
							<h3>缴费状态</h3>
						</view>
						<picker :value="index4" @change="houseRen4" :range="typaBtne4" range-key="name" mode="selector">
							<view class="form-select">{{typaBtne4[index4].name}}</view>
						</picker>
					</view>
					<view class="header-li">
						<view class="header-name">
							<h3>卡状态</h3>
						</view>
						<picker :value="index2" @change="houseRenl" :range="typaBtne2" range-key="name" mode="selector">
							<view class="form-select">{{typaBtne2[index2].name}}</view>
						</picker>
					</view>
					<view class="header-li" v-if="ruleForm.card_status==1">
						<view class="header-name">
							<h3>水表</h3>
						</view>
						<textarea v-model="ruleForm.water_meter" placeholder="请输入" class="text-area">吨</textarea>
					</view>
					<view class="header-li" v-if="ruleForm.card_status==1">
						<view class="header-name">
							<h3>电表</h3>
						</view>
						<textarea v-model="ruleForm.watt_meter" placeholder="请输入" class="text-area">度</textarea>
					</view>
					<view class="header-li" v-if="ruleForm.card_status==1">
						<view class="header-name">
							<h3>天然气表</h3>
						</view>
						<textarea v-model="ruleForm.natural_meter" placeholder="请输入" class="text-area">方</textarea>
					</view>
					<view class="header-li" v-if="ruleForm.card_status==2">
						<view class="header-name">
							<h3>水数</h3>
						</view>
						<textarea v-model="ruleForm.water_meter" placeholder="请输入" class="text-area">吨</textarea>
					</view>
					<view class="header-li" v-if="ruleForm.card_status==2">
						<view class="header-name">
							<h3>电数</h3>
						</view>
						<textarea v-model="ruleForm.watt_meter" placeholder="请输入" class="text-area">度</textarea>
					</view>
					<view class="header-li" v-if="ruleForm.card_status==2">
						<view class="header-name">
							<h3>天然气数</h3>
						</view>
						<textarea v-model="ruleForm.natural_meter" placeholder="请输入" class="text-area">方</textarea>
					</view>

				</view>

				<view class="guarn-box u-m-t-60" style="padding-bottom: 60px;">
					<view class="header-name">
						<h3>上传租赁合同(9张)</h3>
					</view>
					<view style="display: flex;">
						<view class="guarn-box guarn-box2 u-m-t-20" style="flex-flow:wrap">
							<view class="guarn-box2-img" v-for="(item,index) in contarctList">
								<image :src="item"></image>
								<u-icon @click="colseImg1(index)" name="close" color="red" size="40"
									class="guarn-box2-img-close"></u-icon>
							</view>
							<view v-if="contarctList.length<9" @click="uoloadHouse1" class="guarn-box-img"
								style="width: 112px;height: 112px;margin-top: 0px;margin-left: 0px;">
								<image class="u-m-t-72" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/camera.svg" mode=""></image>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
		<view style="margin-top: 50px;padding-bottom: 50px;">
			<button class="yilingqu" @click="submint">确认提交</button>
		</view>

	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const currentDate2 = this.getDate({
				format: true
			})
			const currentDate3 = this.getDate({
				format: true
			})
			return {
				type: 1,
				index: 0,
				index2: 0,
				index3: 0,
				index4: 0,

				array: ['分类', '分类二'],
				inday: 0,
				//个人信息对象
				ownObj:uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0],
				ruleForm: {
					hrs_id: 9, //租售id
					names: null, //租户名称
					number: null, //租户电话
					idcars: null, //身份证号码
					id_card_positive: null, //身份证正面
					id_card_side: null, //身份证反面
					sexs: null, //性别1.男 2.女
					nation: null, //民族
					birthday: null, //出生日期
					rent_count: null, //职业
					rent_money: null, //租金
					payment_method: null, //付款方式
					deposit_money: null, //押金
					rent_begin_time: null, //开始时间
					rent_end_time: null, //结束时间
					water_meter: null, //水表数
					watt_meter: null, //电表数
					natural_meter: null, //天然气数
					rent_contarct: null, //租赁合同
					room_id: null,
					card_status: 1, //卡状态
					ten_pay_state: null, //缴费状态
				},
				contarctList: [],
				//性别
				typaBtne: [{
						id: 0,
						name: '请选择'
					},
					{
						id: 1,
						name: '男'
					},
					{
						id: 2,
						name: '女'
					}
				],
				//性别
				typaBtne2: [{
						id: 0,
						name: '请选择'
					},
					{
						id: 1,
						name: '卡'
					},
					{
						id: 2,
						name: '数'
					}
				],
				typaBtne3: [{
						id: 0,
						name: '请选择'
					},
					{
						id: 1,
						name: '月付'
					},
					{
						id: 2,
						name: '押一付一'
					},
					{
						id: 3,
						name: '季付'
					},
					{
						id: 4,
						name: '押一付三'
					},
					{
						id: 5,
						name: '年付'
					},
					{
						id: 6,
						name: '押一付六'
					},
					{
						id: 7,
						name: '押一付十二'
					}
				],
				typaBtne4: [{
						id: 0,
						name: '请选择'
					},
					{
						id: 1,
						name: '已缴租户'
					},
					{
						id: 2,
						name: '未缴租户'
					}
				],
				date: currentDate,
				date2: "请选择时间",
				date3: "请选择时间",
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(options) {
			if (options.id) {
				this.ruleForm.hrs_id = options.id;
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			tips(txt){
				uni.showToast({
					title: txt,
					icon: 'none'
				})
			},
			//禁止输入特殊字符
			validateInput(){
				var regex = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/; // 只允许英文、数字和汉字
				if (regex.test(this.ruleForm.names)) {
						console.log("输入合法");
						return true;
				} else {
					console.log("输入非法");
					return false;
				}
			},
			validateAmount(money) {
			  // 使用正则表达式进行验证
			  var reg = /^[0-9]+(\.[0-9]{1,2})?$/;
			  if (reg.test(money)) {
			    return true; // 金额格式正确
			  } else {
			    return false; // 金额格式不正确
			  }
			},
			validateIdCardNumber(idCard) {
				// 定义身份证号码的正则表达式
				const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			  // 使用正则表达式对输入的身份证号码进行校验
			  if (idCard.match(idCardRegex)) {
			    return true;
			  } else {
			    return false;
			  }
			},
			 checkIdentityFn(){
				 return new Promise((resolve) => {
					this.$request.api.checkIdentity({
						name:this.ruleForm.names,
						identityCard:this.ruleForm.idcars
					}).then(res => {
						if (res.data.status==200) {
							resolve(true)
							//return true;
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							resolve(false)
							//return false;
						}
					})
				})
			},
			//提交按钮
			async submint() {
				if (!this.ruleForm.names || this.ruleForm.names.length <2) {
					this.tips('请输入姓名')
					return;
				}else{
					if(!this.validateInput()){
						 return uni.showToast({
							title: '请输入正确的姓名',
							icon: 'none'
						 });
					}
				}
				if(!this.ruleForm.number  || this.ruleForm.number.length < 11) {
					this.tips('请输入电话')
					return;
				}
				if(!this.ruleForm.idcars) {
					this.tips('请输入身份证')
					return;
				}else{
					if (this.validateIdCardNumber(this.ruleForm.idcars)) {
					  console.log("身份证号码有效");
					} else {
					  this.tips('请输入格式正确的身份证号')
					  return;
					}
				}
				if(!this.ruleForm.id_card_positive) {
					this.tips('请上传正面身份证')
					return;
				}
				if(!this.ruleForm.id_card_side) {
					this.tips('请上传反面身份证')
					return;
				}
				if(!this.index) {
					this.tips('请选择性别')
					return;
				}
				if(!this.ruleForm.rent_money) {
					this.tips('请输入租金')
					return;
				}else{
					if (this.validateAmount(this.ruleForm.rent_money)) {
					  console.log("金额格式正确");
					} else {
						this.tips('请输入格式正确的租金')
						return;
					}
				}
				if(!this.index3) {
					this.tips('请选择付款方式')
					return;
				}
				if(!this.ruleForm.deposit_money) {
					this.tips('请输入押金')
					return;
				}else{
					if (this.validateAmount(this.ruleForm.deposit_money)) {
					  console.log("金额格式正确");
					} else {
						this.tips('请输入格式正确的押金')
						return;
					}
				}
				if(!this.date2 || this.date2 == '请选择时间') {
					this.tips('租赁开始时间')
					return;
				}
				if(!this.date3 || this.date3 == '请选择时间') {
					this.tips('租赁到期时间')
					return;
				}
				//验证身份证和姓名是否一致
				const isPass = await this.checkIdentityFn();
				if(!isPass){
					return;
				}
				if (this.ruleForm.sexs == 0) {
					this.ruleForm.sexs = null;
				}
				if (this.ruleForm.payment_method == 0) {
					this.ruleForm.payment_method = null;
				}
				if (this.ruleForm.ten_pay_state == 0) {
					this.ruleForm.ten_pay_state = null;
				}
				if (this.ruleForm.card_status == 0) {
					this.ruleForm.card_status = null;
				}
				this.ruleForm.rent_contarct = this.contarctList.toString();
				this.$request.api.addTen({
					pro_id: this.ownObj.proId,// uni.getStorageSync('projectItem').proId,
					user_id: this.ownObj.ownerUserId,//uni.getStorageSync('projectItem').ownerUserId,
					room_id: this.ownObj.roomId,//uni.getStorageSync('projectItem').roomId,
					ten_name: this.ruleForm.names,
					ten_number: this.ruleForm.number,
					ten_card: this.ruleForm.idcars,
					ten_card_posi: this.ruleForm.id_card_positive,
					ten_card_side: this.ruleForm.id_card_side,
					ten_gender: this.ruleForm.sexs,
					ten_nation: this.ruleForm.nation,
					ten_birthday: this.ruleForm.birthday,
					ten_occ: this.ruleForm.rent_count,
					ten_rent: this.ruleForm.rent_money,
					ten_pay_method: this.ruleForm.payment_method,
					ten_deposit: this.ruleForm.deposit_money,
					ten_contract_begin: this.ruleForm.rent_begin_time,
					ten_contract_end: this.ruleForm.rent_end_time,
					ten_hyd_pay: this.ruleForm.card_status,
					ten_pay_state: this.ruleForm.ten_pay_state,
					ten_water_number: this.ruleForm.water_meter,
					ten_meters_number: this.ruleForm.watt_meter,
					ten_natural_number: this.ruleForm.natural_meter,
					ten_lease_contract: this.ruleForm.rent_contarct
				}).then(res => {
					if (res.data.success) {
						uni.showToast({
							title: '新增租户成功！',
							icon: 'none'
						});
						//== 下架 房屋信息
						this.handlerOfflineButton(this.ruleForm.hrs_id);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
						});
					}
				})
			},

			handlerOfflineButton(id) {
				if (id) {
					this.$request.api.rettal({
						id: id,
						offline: 'dsa'
					}).then(res => {
						console.log("走到这块了");
						uni.navigateBack({
							delta: 1
						});
					})
				}
			},
			//选择时间
			bindDateChange: function(e) {
				this.date = e.target.value
				this.ruleForm.birthday = this.date
			},
			//选择时间
			bindDateChange2: function(e) {
				this.date2 = e.target.value
				this.ruleForm.rent_begin_time = this.date2
			},
			//选择时间
			bindDateChange3: function(e) {
				this.date3 = e.target.value
				this.ruleForm.rent_end_time = this.date3
			},
			//选择性别
			typeBtn: function(e) {
				this.index = e.target.value,
					this.ruleForm.sexs = this.typaBtne[this.index].id
			},
			houseRenl: function(h) {
				this.index2 = h.target.value,
					this.ruleForm.card_status = this.typaBtne2[this.index2].id
			},
			houseRen3: function(h) {
				this.index3 = h.target.value,
					this.ruleForm.payment_method = this.typaBtne3[this.index3].id
			},
			houseRen4: function(h) {
				this.index4 = h.target.value,
					this.ruleForm.ten_pay_state = this.typaBtne4[this.index4].id
			},
			//上传身份证正面
			colseImg(val) {
				this.ruleForm.id_card_positive = null;
				if (!this.ruleForm.id_card_positive) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 3, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.id_card_positive = res
												.data.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.id_card_positive = res
												.data.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//上传身份证反面
			colseImg2(val) {
				this.ruleForm.id_card_side = null;
				if (!this.ruleForm.id_card_side) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse2() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 3, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.id_card_side = res.data
												.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleForm.id_card_side = res.data
												.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//上传合同
			colseImg1(val) {
				let lists = [];
				for (let i = 0; i < this.contarctList.length; i++) {
					if (i != val) {
						lists.push(this.contarctList[i]);
					}
				}
				this.contarctList = lists
				// this.ruleForm.rent_contarct = null;
				// if(!this.ruleForm.rent_contarct){
				// 	this.imgFlag=true
				// }
			},
			// 选择图片
			uoloadHouse1() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 3, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.contarctList.push(res.data.data)
											// _this.ruleForm.rent_contarct = res.data.data
											_this.imgFlag = false;
										})
									})
								}
							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.contarctList.push(res.data.data)
											// _this.ruleForm.rent_contarct = res.data.data
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #F9A832;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #F9A832;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		height: 40px;
		line-height: 40px;
		width: 34%;
		border-radius: 33px;
		border: 1px solid #CCCCCC;
	}

	.button1 {
		height: 40px;
		line-height: 40px;
		width: 80%;
		border-radius: 33px;
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.button:hover {
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.header-form {
		margin-top: 60rpx;
		background: #FFFFFF;

		.header-li {
			display: flex;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom: 1rpx solid #EEEEEE;

			.header-name {
				width: 210rpx;
			}

			.text-area {
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}

	.guarn-box {
		width: 100%;
		height: 165px;
	}

	.guarn-box-img {
		width: 87%;
		height: 55%;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 5rpx solid #ccc;
		border-radius: 4rpx;
		margin-left: 72rpx;
		margin-top: 10px
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 34px;
	}

	.header-li {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.foot_item {
		margin-top: 40rpx;
		height: 280rpx;
	}

	.button2 {
		width: 40%;
		height: 30%;
		float: left;
		margin-left: 33px;
		color: #F9A832;
		border: 1px solid #F9A832;
		background-color: #ffffff;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.button_in {
		width: 40%;
		height: 31%;
		float: right;
		background-color: #F9A832;
		margin-right: 34px;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.button_renovation {
		width: 31%;
		font-size: 10px;
		border-radius: 11px;
		border: 1px solid #2986FF;
		background-color: rgb(255, 255, 255);
		margin-right: 249px;
		color: #2986FF;
		margin-top: 20px;
	}

	.footers {
		width: 100%;
		background-color: #FFFFFF;
		height: 72px;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}

	.footer {
		width: 95%;
		margin: 40rpx 20rpx;
	}

	.footer-btn {
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 300rpx;
		float: right;
		text-align: center;
		background-color: #F9A832;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.details {
		color: #FFFFFF;

	}

	.button5 {
		position: relative;
		top: -46rpx;
	}

	.payment {
		width: 50px;
		height: 50px;
		border: 1px solid #C0C0C0;
		border-radius: 12px;
	}

	.payment_img {
		width: 35px;
		margin-top: 10px;
		margin-left: 7px;
	}

	.payment:hover {
		border: 1px solid #F9A832;
		cursor: hand;
	}

	.form-select {
		width: 480rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.header-li1 {
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
		margin-top: 20px;
	}

	.borders {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-top: 14px;
	}

	.borders:hover {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		margin-top: 14px;
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.guarn-box {}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 88%;
		height: 60%;
		float: left;
		margin-right: 12px;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 2px;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}
</style>